<template>
  <div
    class="title-box"
    :style="{
      height: heightInRem,
      backgroundImage: `url(${require('@/assets/fy/' + backBg + '.png')})`,
    }"
  >
    <div v-if="titleBox" class="title" :style="{ width: titleWidth + 'px' }">
      <div class="text">{{ title }}</div>
    </div>

    <div v-if="menu" class="right-menu">
      <slot name="menu"> </slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'titleBox',
  props: {
    title: {
      type: String,
      default: '标题',
    },
    height: {
      type: Number,
      default: '100',
    },

    titleWidth: {
      type: Number,
      default: '100',
    },
    menu: {
      type: Boolean,
      default: false,
    },
    titleBox: {
      type: Boolean,
      default: true,
    },
    backBg: {
      type: String,
      default: 'newsiderbg',
    },
  },
    computed: {
    heightInRem() {
      return (this.height / 192) + 'rem';
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.title-box {
  background-image: url('../../../assets/fy/newsiderbg.png');
  background-size: 100% 100%;
  position: relative;
  .title {
    background-image: url('../../../assets/fy/samlltitle1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100px;
    height: 40px;
    position: absolute;
    top: 5px;
    left: 0px;
    .text {
      position: absolute;
      top: 0px;
      left: 40px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      line-height: 40px;
    }
  }
  .content {
    margin-top: 40px;
    height: 100%;
  }
}
.right-menu {
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
